<div class="container typography-usage">

    <div class="block-header">
        <h2>Typography</h2>
    </div>


    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">Headings</span>
      <span class="md-subhead">
          Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
      </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>


            <h1>This is a Heading 1</h1>
            <p>Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor.
                Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In
                ut eros hendrerit est consequat posuere et at velit.</p>

            <div class="clearfix"></div>

            <h2>This is a Heading 2</h2>
            <p>In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas
                pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue
                rutrum tincidunt. Quisque a malesuada purus.</p>

            <div class="clearfix"></div>

            <h3>This is a Heading 3</h3>
            <p>Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet
                tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.</p>

            <div class="clearfix"></div>

            <h4>This is a Heading 4</h4>
            <p>Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur
                egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.</p>

            <div class="clearfix"></div>

            <h5>This is a Heading 5</h5>
            <p>Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus
                odio. Vivamus pretium nec odio cursus elementum. Suspendisse molestie ullamcorper ornare.</p>

            <div class="clearfix"></div>

            <h6>This is a Heading 6</h6>
            <p>Donec ultricies, lacus id tempor condimentum, orci leo faucibus sem, a molestie libero lectus ac justo.
                ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae,
                dapibus in tellus.</p>
            <div class="clearfix"></div>

            <h1>h1. Bootstrap heading
                <small>Secondary text</small>
            </h1>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>
            <div class="clearfix"></div>
            <h2>h2. Bootstrap heading
                <small>Secondary text</small>
            </h2>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>
            <div class="clearfix"></div>
            <h3>h3. Bootstrap heading
                <small>Secondary text</small>
            </h3>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>
            <div class="clearfix"></div>
            <h4>h4. Bootstrap heading
                <small>Secondary text</small>
            </h4>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>
            <div class="clearfix"></div>
            <h5>h5. Bootstrap heading
                <small>Secondary text</small>
            </h5>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>
            <div class="clearfix"></div>
            <h6>h6. Bootstrap heading
                <small>Secondary text</small>
            </h6>
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code>
                class.</p>

        </md-card-content>
    </md-card>


    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">Inline text elements</span>
        <span class="md-subhead">
            Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
        </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>

            <div class="row">
                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Marked text</p>
                    <p>For highlighting a run of text due to its relevance in another context, use the 'mark' tag.</p>
                    <mark>This is marked text</mark>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Deleted Text</p>
                    <p>For indicating blocks of text that have been deleted use the 'del' tag.</p>
                    <del>This is Deleted Text</del>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Strikethrough text</p>
                    <p>For indicating blocks of text that are no longer relevant use the 's' tag.</p>
                    <s>This is Deleted Text</s>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Inserted Text</p>
                    <p>For indicating additions to the document use the 'ins' tag.</p>
                    <ins>This is Inserted Text</ins>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Underlined Text</p>
                    <p>To underline text use the 'u' tag.</p>
                    <u>This is Underlined Text</u>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Small Text</p>
                    <p>For de-emphasizing inline or blocks of text, use the 'small' tag.</p>
                    <small>This is Small Text</small>
                </div>

                <div class="col-sm-4">
                    <p class="c-black">Bold Text</p>
                    <p>For emphasizing a snippet of text with a heavier font-weight.</p>
                    <strong>This is Bold Text</strong>
                </div>

                <div class="col-sm-4">
                    <p class="c-black">Italics Text</p>
                    <p>For emphasizing a snippet of text with italics.</p>
                    <em>This is Italics Text</em>
                </div>
            </div>

        </md-card-content>
    </md-card>


    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">Helper Classes</span>
        <span class="md-subhead">
            Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
        </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>

            <p class="c-black">Alignment Classes</p>
            <p>Easily realign text to components with text alignment classes.</p>

            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
            <p class="text-nowrap">No wrap text.</p>

            <p class="c-black m-t-25">Transformation classes</p>
            <p>Transform text in components with text capitalization classes.</p>

            <p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>

        </md-card-content>
    </md-card>

    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">Blockquotes</span>
        <span class="md-subhead">
            Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
        </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>

            <p class="m-b-25">For quoting blocks of content from another source within your document.</p>

            <blockquote class="m-b-25">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>

            <blockquote class="m-b-25">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>

            <blockquote class="blockquote-reverse m-b-25">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>

        </md-card-content>
    </md-card>
    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">List</span>
        <span class="md-subhead">
            Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
        </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>

            <div class="row">
                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Unordered</p>

                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit
                            <ul>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                                <li>Ac tristique libero volutpat at</li>
                            </ul>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ul>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Ordered</p>

                    <ol>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit</li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Spretium nisl aliquet lorem ipsum</li>
                        <li>Linking best ttoth bellorem</li>
                    </ol>
                </div>

                <div class="col-sm-4 m-b-25">
                    <p class="c-black">Ordered - Roman</p>

                    <ol type="i">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit</li>
                        <li>Phasellus iaculis neque</li>
                        <li>Purus sodales ultricies</li>
                        <li>Vestibulum laoreet porttitor sem</li>
                        <li>Ac tristique libero volutpat at</li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ol>
                </div>

            </div>

        </md-card-content>
    </md-card>


    <md-card class="m-b-30">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">Description</span>
        <span class="md-subhead">
            A list of terms with their associated descriptions.
        </span>
            </md-card-header-text>
        </md-card-header>
        <md-card-content>

            <div class="row">
                <div class="col-sm-6 m-b-25">
                    <p class="c-black">Description</p>
                    <dl>
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                    </dl>
                </div>

                <div class="col-sm-6 m-b-25">
                    <p class="c-black">Horizontal description</p>
                    <dl class="dl-horizontal">
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                        <dt>Felis euismod semper eget lacinia</dt>
                        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
                            justo sit amet risus.
                        </dd>
                    </dl>
                </div>

            </div>

        </md-card-content>
    </md-card>
</div>
